<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .talk_con{
            width:600px;
            height:500px;
            border:1px solid #666;
            margin:50px auto 0;
            background:#f9f9f9;
        }
        .talk_show{
            width:580px;
            height:420px;
            border:1px solid #666;
            background:#fff;
            margin:10px auto 0;
            overflow:auto;
        }
        .talk_input{
            width:580px;
            margin:10px auto 0;
        }
        .whotalk{
            width:80px;
            height:30px;
            float:left;
            outline:none;
        }
        .talk_word{
            width:420px;
            height:26px;
            padding:0px;
            float:left;
            margin-left:10px;
            outline:none;
            text-indent:10px;
        }        
        .talk_sub{
            width:56px;
            height:30px;
            float:left;
            margin-left:10px;
        }
        .atalk{
            margin:10px;
        }
        .atalk span{
            display:inline-block;
            background:#0181cc;
            border-radius:10px;
            color:#fff;
            padding:5px 10px;
            word-break: break-all;
        }
        .btalk{
            margin:10px;
            text-align:right;
        }
        .btalk span{
            display:inline-block;
            background:#ef8201;
            border-radius:10px;
            color:#fff;
            padding:5px 10px;
            word-break: break-all;
        }
    </style>
    <script type="text/javascript">
        function $(ele){
				return document.querySelector(ele);
			}
        window.onload = function(){
            $('#talkwords').onkeyup = send;
            function send(e){
                e = e || window.event
                if( e.keyCode == 13 && e.ctrlKey ){
                        if($('#talkwords').value == ""){
                        // 消息为空时弹窗
                        alert("消息不能为空");
                        return;
                    }
                    if($('#who').value == 0){
                        //如果#who.value为0  那么是 任鑫说话，反之王辉说话
                        str = '<div class="atalk"><span>任鑫 :' + $('#talkwords').value +'</span></div>';
                    }
                    else{
                        str = '<div class="btalk"><span>王辉 :' + $('#talkwords').value +'</span></div>'; 
                    }
                    $('#words').innerHTML = $('#words').innerHTML + str;
                    $('#talkwords').value = '';
                }
                    $('#talksub').onclick = function(){
                    //定义空字符串
                    var str = "";
                    if($('#talkwords').value == ""){
                        // 消息为空时弹窗
                        alert("消息不能为空");
                        return;
                    }
                    if($('#who').value == 0){
                        //如果#who.value为0  那么是 任鑫说话 反之是王辉说话
                        str = '<div class="atalk"><span>任鑫 :' + $('#talkwords').value +'</span></div>';
                    }
                    else{
                        str = '<div class="btalk"><span>王辉 :' + $('#talkwords').value +'</span></div>'; 
                    }
                    $('#words').innerHTML = str;
                    $('#talkwords').value = '';
                }
            }
        }
    </script>
</head>
<body>
    <div class="talk_con">
        <div class="talk_show" id="words">
            <div class="atalk">
                <span>任鑫：现在就屯BB机，以后好的号码肯定值钱！</span>
            </div>
            <div class="btalk">
                <span>王辉：代码敲完了吗你就在这里做梦？</span>
            </div>
        </div>
        <div class="talk_input">
            <select class="whotalk" id="who">
                <option value="0">任鑫</option>
                <option value="1">王辉</option>
            </select>
            <input type="text" class="talk_word" id="talkwords">
            <input type="button" value="发送" class="talk_sub" id="talksub">
        </div>
    </div>
</body>
</html>